define('frender3x/app/FRender',
    [
        'dojo/_base/declare',
        'dojo/_base/lang',
        'dojo/on',

        'd3/d3',

        'dojo/dom-style',

        'esri/layers/GraphicsLayer',
        'esri/graphic',
        'esri/geometry/Point',
        'esri/symbols/PictureMarkerSymbol',
        'esri/symbols/SimpleMarkerSymbol',
        'esri/Color'
    ],
    function(declare, lang, on,
             d3js,
             domStyle,
             GraphicsLayer, Graphic, Point, PictureMarkerSymbol, SimpleMarkerSymbol, Color){

        var d = declare(null, {
            playState:false,
            constructor:function(map, opt){

                this.map = map;
                this.domId = 'deep'+parseInt(Math.random()*1000);
                this.layer = new GraphicsLayer();
                this.map.addLayer(this.layer);

                this.option = {
                    imgSize:[100, 100],
                    imgScale:100,
                    //一个像素代表实际多少米
                    pixelRate:1
                };

                lang.mixin(this.option, opt);

                this.playStep = -1;

                d3js.select('#' + this.map.id + '_gc')
                    .append('g')
                    .attr({
                        'id': this.domId
                    });

                this.initialized = false;
            },
            //----------------------------------------------public--------------------------------------------------
            init:function(){
                if (this.initialized) return;

                on(this.map, 'zoom-start', lang.hitch(this, this._zoomStart));
                on(this.map, 'zoom-end', lang.hitch(this, this._zoomEnd));
                on(this.map, 'pan', lang.hitch(this, this._pan));

                this._init();
                this.initialized = true;
            },
            setOption:function(opt){
                lang.mixin(this.option, opt);
            },
            insteadOption:function(opt){
                this.option = opt;
            },
            setCenter:function(coord){
                this.center = new Point(coord[0], coord[1], this.map.spatialReference);
            },
            setPictureUrl:function(url){
                this.pictureUrl = url;
            },
            setPictureNames:function(names){
                this.pictureNames = names;
            },
            setImageSize:function(size){
                this.option.imgSize = size;
            },
            setImageScale:function(scale){
                this.option.imgScale = scale;
            },
            setLods:function(lods){
                this.lods = lods;
            },
            play:function(interval){
                this.playState = true;
                this._play(interval);
            },
            stop:function(){
                this.playState = false;
            },
            playTo:function(n){
                return this._playTo(n);
            },
            hide:function(){
                this._hide();
            },
            show:function(){
                this._show();
            },
            //-----------------------------------------------private--------------------------------------------------
            _init:function(){
                if (!this.center) return;

                this._draw2();
            },
            _draw:function(){
                /*
                 this.graphic = new Graphic(this.center, null, null);

                 this.layer.add(this.graphic);
                 */

                //test
                /*
                 var g = new Graphic(this.center, new SimpleMarkerSymbol('circle', 16,  null, new Color([0,255,0,1])), {});
                 this.layer.add(g);
                 */


                var o = this.option;

                var coord = this.map.toScreen(this.center);
                var size = this._scaleImage();

                var node = d3js.select('#' + this.domId);

                if (this.playStep > -1){
                    node.append('image')
                        .attr({
                            'x':coord.x - size[0]/2,
                            'y':coord.y - size[1]/2,
                            'width':size[0],
                            'height':size[1],
                            'xlink:href':this.pictureUrl+this.pictureNames[this.playStep]
                        });
                }else{
                    node.append('image')
                        .attr({
                            'x':coord.x - size[0]/2,
                            'y':coord.y - size[1]/2,
                            'width':size[0],
                            'height':size[1],

                            'style':'display:none;z-index:0'
                        });
                }
            },

            _draw2:function(){
                var o = this.option;

                var coord = this.map.toScreen(this.center);
                var mapScale = this.map.getScale();
                var level = this.map.getLevel();
                var resolution = this.lods[level].resolution;
                console.log(resolution);


                var imgWidth = o.imgSize[0] / resolution;
                //console.log('scale:'+mapScale+' imgSize:'+o.imgSize[0]+' imgWidth:'+imgWidth);
                var imgHeight = o.imgSize[1] / resolution;

                var size = [imgWidth, imgHeight];
                console.log('size:'+size[0] + ' '+size[1]+' mapscale:'+mapScale);

                var node = d3js.select('#' + this.domId);


                if (this.playStep > -1){
                    node.append('image')
                        .attr({
                            'x':coord.x,
                            'y':coord.y,
                            'width':size[0],
                            'height':size[1],
                            'xlink:href':this.pictureUrl+this.pictureNames[this.playStep]
                        });
                }else{
                    node.append('image')
                        .attr({
                            'x':coord.x,
                            'y':coord.y,
                            'width':size[0],
                            'height':size[1],

                            'style':'display:none;z-index:0'
                        });
                }
            },
            _zoomStart:function(){
                dojo.empty(this.domId);
            },
            _zoomEnd:function(){
                /*
                 var size = this._scaleImage();

                 this.graphic.symbol.width = size[0];
                 this.graphic.symbol.height = size[1];
                 this.layer.redraw();
                 */

                /*
                 var coord = this.map.toScreen(this.center);
                 console.log(coord);
                 var size = this._scaleImage();
                 var image = d3js.select('#' + this.domId + ' image');
                 var coord = this.map.toScreen(this.center);
                 image.attr({
                 'x':coord.x - size[0]/2,
                 'y':coord.y - size[1]/2,
                 'width':size[0],
                 'height':size[1]

                 })
                 */
                d3.select('#' + this.domId)
                    .attr({
                        'transform': 'matrix(1,0,0,1,0,0)'
                    });
                this._draw2();
            },
            _pan:function(e){
                var dx = e.delta.x;
                var dy = e.delta.y;
                var _dx = this.map.__visibleRect.x + dx;
                var _dy = this.map.__visibleRect.y + dy;
                d3.select('#' + this.domId)
                    .attr({
                        'transform': 'matrix(1,0,0,1,' + _dx + ',' + _dy + ')'
                    });
            },
            _scaleImage:function(){
                var mapScale = this.map.getScale();
                var rate = this.option.imgScale / mapScale;
                var imgWidth = this.option.imgSize[0] * rate;
                var imgHeight = this.option.imgSize[1] * rate;

                return [imgWidth, imgHeight];
            },
            _playTo:function(n){
                if (this.playState && n >= 0 && n < this.pictureNames.length){
                    d3.select('#' + this.domId + ' image')
                        .attr({
                            'xlink:href':this.pictureUrl+this.pictureNames[n],
                            'style':'display:block;z-index:0'
                        });
                    this.playStep = n;
                    return false;
                }else{
                    return true;
                }



            },
            _play:function(interval){
                this.autoInterval = interval;
                this.playStep = 0;
                this._autoPlay();
            },
            _autoPlay:function(){
                var self = this;
                setTimeout(function(){
                    if (self.playStep < self.pictureNames.length-1){
                        self._playTo(self.playStep);
                        self.playStep++;
                        self._autoPlay();

                    }
                }, this.autoInterval);
            },
            _hide:function(){
                domStyle.set(this.domId,{
                    "display": "none"
                })
                this.visible = false;
            },
            _show:function(){
                domStyle.set(this.domId,{
                    "display": "block"
                })
                this.visible = true;
            }

        })
        return d;
    })
